<template>
<div class="main">
    <div class="crumbs">
        <span v-for="(item, i) in getCrumb" :key="item">
            {{item}} <b v-show="getCrumb.length-i-1">/</b>
        </span>
    </div>
    <div class="main-content">
        <router-view />
    </div>
</div>
</template>

<script>
export default {
    name: "contentMain",
    computed: {
        getCrumb() {
            let crumb = this.$route.meta?.crumb
            if(crumb && this.$route.params.crumb) {
                crumb += this.$route.params.crumb
            }
            return crumb?.split("_");
        }
    },
}
</script>

<style scoped>
.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 16px 12px 16px;
    user-select: none;
}
.crumbs {
    height: 40px;
    line-height: 40px;
}
.crumbs span:last-of-type {
    color: #be05cf;
    font-weight: bold;
}
.main-content {
    height: calc(100% - 40px - 24px);
    padding: 12px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 2px 2px #cecece;
}
</style>